<template>
	<view class="wrap">
		<view class="selected" >
			<view class="title">{{type}}</view>
		</view>
		<scroll-view scroll-y="true">
			<u-form ref="uForm">
				<u-form-item :label-position="labelPosition" label="物品类型(必填)" label-width="200">
					<u-input :border="border" type="select" :select-open="selectShow" placeholder="请选择" @click="selectShow = true"></u-input>
				</u-form-item>
				<u-form-item label-width="200"  :label-position="labelPosition" label="需求描述(选填)">
					<u-input type="textarea" :border="border" placeholder="请填写尺寸、体积、重量等信息,方便是否带齐工具,并为您提供准确的报价(您上传的图片非常重要哦~)"/>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="物品图片(必填)" label-width="150" required>
					<u-upload :custom-btn="true" ref="uUpload" :auto-upload="true" :action="action"
					 :max-size="10 * 1024 * 1024" max-count="9" width="160" height="160">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item label-width="200" label-position="left" label="上门时间(必填)">
					<view class="dateBtn" @click="dateClick">
						{{dateLabel}}<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label-width="200" :label-position="labelPosition" label="上门地址(必填)" prop="payType" :leftIconStyle="{color:'#d5d5d5'}">
					<u-input :border="border" type="select" :select-open="actionSheetShow" placeholder="请选择" @click="actionSheetShow = true"></u-input>
				</u-form-item>
			</u-form>
		</scroll-view>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-calendar v-model="show" :mode="mode" @change="changeDate" max-date="2100-01-01"></u-calendar>
		<view class="btn">
			<u-button size="default" type="primary"
			 :custom-style="customStyle">提交</u-button>
		</view>
	</view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
	data() {
		return {
			type:null,
		    show: false,
		    mode: 'date',
			selectList: [
				{
					value: '床',
					label: '床'
				},
				{
					value: '柜子',
					label: '柜子'
				}
			],
			border: false,
			check: false,
			selectStatus: 'close',
			selectShow: false,
			radioCheckWidth: 'auto',
			radioCheckWrap: false,
			labelPosition: 'top',
			errorType: ['toast'],
			// 图片服务器地址
			action: config.baseUrl + '/common/upload',
			customStyle: {
				background: '#0ab0ed'
			},
			dateLabel:'今天',
			actionSheetList: [
				{
					text: '我的地址1'
				},
				{
					text: '我的地址2'
				},
				{
					text: '添加地址'
				}
			],
			actionSheetShow: false,
		};
	},
	onLoad: function (option) {
		this.type = option.name
	},
	methods: {
		submit() {
			if(this.$u.test.isEmpty(this.model.roomType)){
				return this.$mytip.toast('请选择租房间')
			}
			let files = [];
			// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
			files = this.$refs.uUpload.lists.filter(val => {
				return val.progress == 100;
			})
			if(this.$u.test.isEmpty(files)){
				return this.$mytip.toast('请至少选择一张房源图片')
			}
			let imageList = files.map(val => {
				return {
					imageName: val.response.realName,
					imagePath: val.response.fileName,
					imageUrl: val.response.url, 
					imageSize: val.file.size
				}
			})
			this.model.imageList = imageList
			let url = "api/house/saveHouse";
			this.$u.post(url,this.model).then(data => {
				uni.$emit('findIndexHouseList', {});
				this.$u.route({
					type: 'tab',url: '/pages/index/index'
				})
			});
		},
		// 选择类型回调
		selectConfirm(e) {
			this.model.roomLabel = ''
			this.model.roomType = ''
			e.map((val, index) => {
				this.model.roomLabel += val.label;
				this.model.roomType += val.value;
			})
		},
		dateClick(){
			this.show = true
		},
		changeDate(e){
			// this.model.startDate = e.result
			// this.dateLabel = e.result
		},
		// 点击actionSheet回调
		actionSheetCallback(index) {
			// uni.hideKeyboard();
			// this.model.stepType = this.actionSheetList[index].text;
		},
	}
};
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}
	
	.selected{
		margin: 10rpx 0;
		.title {
		    font-size: 32rpx;
		    color: $u-main-color;
			font-weight: 600;
		}
	}
	
	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}
	
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
	
	.btn{
		margin-top: 80rpx;
		margin-bottom: 20rpx;
		width: 100%;
	}
	
	.dateBtn{
		position: absolute;
		right: 0rpx;
		color: #606266;
	}
</style>	
